<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />

    <style>
        .parent-frame {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        .child-frame {
            width: 100px;
            height: 100px;
            border: 1px dotted blue;
        }
    </style>
</head>

<body>
    <h1>CSS对齐</h1>
    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.cnblogs.com/weiqinl/p/9378949.html">html中div使用CSS实现水平/垂直居中的多种方式</a>
        </li>
    </ul>

    <h2>示例效果</h2>


    <h3>示例中的涉及的CSS属性</h3>
    <pre>
.parent-frame {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

.child-frame {
    width: 100px;
    height: 100px;
    border: 1px dotted blue;
}
    </pre>


    <h3>text-align:center，水平居中</h3>

    <pre>
&lt;div class=&quot;parent-frame&quot;&gt;
    子元素水平居中
    &lt;i style=&quot;display:block; text-align: center;color: blue&quot;&gt;块状元素，水平居中&lt;/i&gt;
&lt;/div&gt;
    </pre>

    <div class="parent-frame">
        子元素水平居中
        <i style="display:block; text-align: center;color: blue">块状元素，水平居中</i>
    </div>

    <h3>margin: 0 auto，水平居中</h3>

    <pre>
&lt;div class=&quot;parent-frame&quot;&gt;
    子元素水平居中
    &lt;i class=&quot;child-frame&quot; style=&quot;display: block;margin: 0 auto&quot;&gt;块状元素，水平居中&lt;/i&gt;
&lt;/div&gt;
    </pre>

    <div class="parent-frame">
        子元素水平居中
        <i class="child-frame" style="display: block;margin: 0 auto">块状元素，水平居中</i>
    </div>

    <h3>line-height值，垂直居中</h3>

    <pre>
&lt;div class=&quot;parent-frame&quot;&gt;
    &lt;div style=&quot;line-height: 200px;&quot;&gt;line-height值=父height值&lt;/div&gt;
&lt;/div&gt;
    </pre>

    <div class="parent-frame">
        <div style="line-height: 200px;">line-height值=父height值</div>
    </div>

    <h3>使用float属性，配合relative定位，实现水平居中</h3>

    <pre>
&lt;div class=&quot;parent-frame&quot;&gt;
    &lt;div style=&quot;float: left; position: relative; left: 50%; clear: both;&quot;&gt;
        &lt;div style=&quot;position: relative; left: -50%&quot;&gt;使用float+relative&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
    </pre>
    <div class="parent-frame">
        <div style="float: left; position: relative; left: 50%; clear: both;">
            <div style="position: relative; left: -50%">使用float+relative</div>
        </div>
    </div>


    <h3>使用table布局，默认垂直居中</h3>

    <pre>
&lt;table class=&quot;parent-frame&quot;&gt;
    &lt;tr&gt;
        &lt;td&gt;
            table默认垂直居中[vertical-align: middle]
        &lt;/td&gt;
        &lt;td style=&quot;text-align:center;&quot;&gt;
            水平居中添加text-align:center
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
    </pre>

    <table class="parent-frame">
        <tr>
            <td>
                table默认垂直居中[vertical-align: middle]
            </td>
            <td style="text-align:center;">
                水平居中添加text-align:center
            </td>
        </tr>
    </table>



    <h3>仿table，display:table-cell。并使用vertical-align属性,实现垂直居中</h3>

    <pre>
&lt;div class=&quot;parent-frame&quot; style=&quot;display: table-cell;vertical-align: middle&quot;&gt;
    仿table: display:table-cell垂直居中vertical-align:middle
&lt;/div&gt;
    </pre>

    <div class="parent-frame" style="display: table-cell;vertical-align: middle">
        仿table: display:table-cell垂直居中vertical-align:middle
    </div>



    <h3>使用absolute绝对定位，配合margin使用，实现水平垂直居中</h3>

    <pre>
&lt;div class=&quot;parent-frame&quot; style=&quot;position: relative&quot;&gt;
    利用绝对定位，配合margin:auto自动计算外边距。
    &lt;div class=&quot;child-frame&quot; style=&quot;position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;&quot;&gt;
        定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
    &lt;/div&gt;
&lt;/div&gt;
    </pre>

    <div class="parent-frame" style="position: relative">
        利用绝对定位，配合margin:auto自动计算外边距。
        <div class="child-frame" style="position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;">
            定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
        </div>
    </div>

    <h3>使用absolute绝对定位，配合margin的负值(negative margins)来实现水平垂直居中</h3>

    <pre>
&lt;div class=&quot;parent-frame&quot; style=&quot;position: relative;&quot;&gt;
    利用绝对定位，配合margin的负值来实现居中。
    &lt;div class=&quot;child-frame&quot;
        style=&quot;position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;&quot;&gt;
        负边距来实现，水平垂直居中。需要知道该元素的具体大小
    &lt;/div&gt;
&lt;/div&gt;
    </pre>


    <div class="parent-frame" style="position: relative;">
        利用绝对定位，配合margin的负值来实现居中。
        <div class="child-frame"
            style="position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;">
            负边距来实现，水平垂直居中。需要知道该元素的具体大小
        </div>
    </div>


    <h3>使用absolute绝对定位，配合translate移动转换，实现水平垂直居中</h3>

    <pre>
&lt;div class=&quot;parent-frame&quot; style=&quot;position: relative;&quot;&gt;
    利用绝对定位，配合translate移动到水平垂直居中。
    &lt;div class=&quot;child-frame&quot; style=&quot;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);&quot;&gt;
        不需知具体大小。支持IE9+及现代浏览器
    &lt;/div&gt;
&lt;/div&gt;
    </pre>


    <div class="parent-frame" style="position: relative;">
        利用绝对定位，配合translate移动到水平垂直居中。
        <div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            不需知具体大小。支持IE9+及现代浏览器
        </div>
    </div>


    <h3>使用flex布局,设置其属性justify-content，align-items都为center，实现水平垂直居中</h3>
    <pre>
&lt;div class=&quot;parent-frame&quot; style=&quot;display: flex; justify-content: center; align-items: center&quot;&gt;
    &lt;div class=&quot;child-frame&quot;&gt;使用flex布局，justify-content属性定义了项目在主轴上的对齐方式。&lt;/div&gt;
    &lt;div class=&quot;child-frame&quot;&gt;
        align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中，则水平、垂直居中对齐
    &lt;/div&gt;
&lt;/div&gt;
    </pre>
    <div class="parent-frame" style="display: flex; justify-content: center; align-items: center">
        <div class="child-frame">使用flex布局，justify-content属性定义了项目在主轴上的对齐方式。</div>
        <div class="child-frame">
            align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中，则水平、垂直居中对齐
        </div>
    </div>


    <h3>利用flex布局，配合margin：auto使用，实现水平垂直居中</h3>

    <pre>
&lt;div class=&quot;parent-frame&quot; style=&quot;display: flex;&quot;&gt;
    &lt;div style=&quot; margin: auto;&quot;&gt;父元素使用flex布局，子元素配合margin:auto使用&lt;/div&gt;
&lt;/div&gt;
    </pre>

    <div class="parent-frame" style="display: flex;">
        <div style=" margin: auto;">父元素使用flex布局，子元素配合margin:auto使用</div>
    </div>

</body>

</html>